v-model是vue框架裡面很常見的一種雙向綁定的用法，主要會實作在input、textarea、select等的這些表單標籤上，目的是為了實現資料的雙向同步，也就是說當你輸入畫面時，畫面資料會更新到state上，如果你更新state，畫面也會被更新成state現在的值。使用了v-model，就能讓操做變得更直覺，省去需要手動去做其他更新的動作。

看到這裡的你一定心中默默地有個疑問，「奇怪？不是都說Vue主要是以單向資料流的概念下去做state的操作了嗎！為什麼還有v-model這種可能會讓資料流變混亂的雙向綁定呢？」

今天就讓我們一起從撕下v-model的假面具(誤)，開始今天的主題！

雙向綁定？單向綁定？ v-model的使用方式

先來快速看一下，通常在使用v-model的時候，都是怎麼使用的。

<template>
  <main>
    <h2>Vue v-model</h2>
    <!-- 透過v-model將state綁定到input -->
    <input type="text" v-model="content">
    <p><b>input content: </b>{{ content }}</p>
  </main>
</template>

<script setup>
import { ref } from 'vue';
const content = ref('default content');

</script>

開始輸入前，畫面上的input content會顯示透過v-model綁定的預設state，開始輸入後，畫面上的input content則會依照輸入的內容改變。

透過上面的使用範例來看的話，的確看起來就是飄散著一股濃濃的雙向綁定感，因為單從操作上來看，就是state改變了操作，畫面也能改變state，而且只有使用v-model而已，從程式碼上看，也沒有看到有使用什麼事件監聽的處理。也因為這種「雙向綁定感」的用法，讓整體程式碼變得更直覺、更簡潔，輕輕鬆鬆就取得input改變的內容。但是！！其實v-model它並不是雙向綁定，而是「披著雙向綁定外皮的單向綁定 」。

v-model的真面目是！？

如果說v-model其實並不是真正的雙向綁定，那v-mode這傢伙到底如何讓自己有雙向綁定感的用法呢？那是因為v-model的真面目其實是v-bind＋v-on的組合，所以它會有最終我們所看到的畫面更新state的效果，不過實際上一樣還是靠事件監聽。

<template>
  <main>
    <h2>Vue v-model 真面目</h2>
    <!-- 一樣還是單向資料流，是透過事件監聽來更新state -->
    <input type="text" :value="content" @input="content=$event.target.value">
    <p><b>input content: </b>{{ content }}</p>
  </main>
</template>

<script setup>
import { ref } from 'vue';
const content = ref('default content');

</script>

react要怎麼達到這個效果？

花了一些時間摘下v-model的假面具後，再回頭看我們的一號男主角React！沒有了v-model這樣包裝好的用法，要怎麼實現input的操作呢？關鍵點一樣就是「透過事件監聽來更新state」。

import { useState } from 'react';

function App() {
  const [content, setContent] = useState('default value');

  return (
    <div className="App">
      <h2>React</h2>
      {/* 注意這一行，是不是感覺很眼熟 */}
      <input type="text" value={content} onChange={(e) => setContent(e.target.value)} />
      <p><b>input content: </b>{ content }</p>
    </div>
  );
}

其實這一段就是在做v-model在做的事情，只是換成了React的寫法。

<input type="text" value={content} onChange={(e) => setContent(e.target.value)} />

這樣的做法，一樣達到我們要的效果了，雖然沒有v-model這樣的語法糖包裝，需要多寫一些程式碼，對於習慣Vue寫法的人可能一開始會稍微有點不習慣，但只要掌握、理解單向資料流的對於這樣資料操作上的作法，就不會那麼卡卡的了！

掌握資料流的概念，才能掌握資料的操控

今天從Vue的v-model的用法，進一步解到大家說到的雙向綁定v-model，其實是透過單向資料流達成的作法，更從這個部分再延伸到React在相同情境中的作法為何。也又從今天的主題再次複習到單向資料流中，一個很重要的關鍵，也就是透過「事件監聽更新資料」。不管是想要達到怎樣的介面操作，在以單向資料流為核心概念的Vue和React中，只要掌握這個重點，就能更好地利用Vue及React各自的特性達成。從這個主題的學習也讓我更深刻認知到不論是寫Vue還是寫React，其實最終需要好好了解及掌握的是最根本的資料流的運用，而不只是單單了解框架中語法的用法就好，也才能讓自己不論寫Vue還是寫React，都能更快上手及熟悉資料的操作。